<script>
export default {
  onShow() {
    // 页面每次显示时刷新测试结果
    setTimeout(() => {
      const testResult = uni.getStorageSync('constitutionTestResult')
      if (testResult && testResult.main && testResult.main.id) {
        // 触发全局事件，通知setup脚本刷新数据
        uni.$emit('refresh-test-result')
      }
    }, 300)
  }
}
</script>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const userInfo = ref(null)
const membershipLevel = ref('free')
const lastTestResult = ref(null)

// 在页面加载时初始化数据
onMounted(() => {
  // 获取用户信息
  const storedUserInfo = uni.getStorageSync('userInfo')
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
    membershipLevel.value = storedUserInfo.membershipLevel || 'free'
  }
  
  // 获取最新测试结果
  loadTestResult()
  
  // 监听刷新事件
  uni.$on('refresh-test-result', () => {
    loadTestResult()
  })
  
  // 监听测试完成事件
  uni.$on('constitution-test-completed', () => {
    console.log('收到测试完成事件')
    loadTestResult()
  })
})

// 清理事件监听
onBeforeUnmount(() => {
  uni.$off('constitution-test-completed')
  uni.$off('refresh-test-result')
})

// 加载测试结果
function loadTestResult() {
  try {
    const result = uni.getStorageSync('constitutionTestResult')
    console.log('加载体质测试结果:', result)
    
    if (result && result.date) {
      // 判断结果是否有效
      const hasValidResult = result.mains && result.mains.length > 0
      
      if (hasValidResult) {
        // 计算测试时间是否在三个月内
        const testDate = new Date(result.date)
        const now = new Date()
        const diff = now.getTime() - testDate.getTime()
        const days = Math.floor(diff / (1000 * 60 * 60 * 24))
        
        if (days <= 90) {
          lastTestResult.value = result
          console.log('测试结果已更新到界面')
        } else {
          // 结果已超过三个月
          lastTestResult.value = null
          console.log('测试结果已超过三个月，需要重新测试')
        }
      } else {
        // 无有效结果
        lastTestResult.value = null
        console.log('无有效的体质测试结果')
      }
    } else {
      // 无有效结果
      lastTestResult.value = null
      console.log('无有效的体质测试结果')
    }
  } catch (e) {
    console.error('获取测试结果失败', e)
    lastTestResult.value = null
  }
}

function startConstitutionTest() {
  uni.navigateTo({
    url: '/pages/health-guide/constitution-test',
    success: function(res) {
      console.log('成功打开体质测试页面')
    }
  })
}

// 获取体质类型描述
function getConstitutionDescription(typeId) {
  const descriptions = {
    pinghe: '阴阳气血调和，平素患病较少。对自然环境和社会环境适应能力较强。',
    qixu: '元气不足，以疲乏、气短、自汗等气虚表现为主要特征。易患感冒、内脏下垂等病；病后康复缓慢。',
    yangxu: '阳气不足，以畏寒怕冷、手足不温等虚寒表现为主要特征。易患痰饮、肿胀、泄泻等病；感邪易从寒化。',
    yinxu: '阴液不足，阴液亏少，阴虚生内热，以口燥咽干、手足心热等虚热表现为主要特征。易患虚劳、失精、不寐等病；感邪易从热化。',
    tanshi: '痰湿凝聚，以形体肥胖、腹部肥满、口黏苔腻等痰湿表现为主要特征。易患消渴（糖尿病）、中风（高血压）、胸痹（心血管）等病。',
    shire: '湿热内蕴，以面垢油光、等湿热表现为主要特征。易患疮疖、黄疸、热淋，湿疹等病。',
    xueyu: '血行不畅，舌质紫黯等血瘀，心脑血管肿瘤为主要特征。易患出血，癥瘕，中风，胸痹等病。',
    qiyu: '气机郁滞，以神情抑郁、忧虑脆弱，抑郁症等气郁为主要特征。易患郁证、脏燥、不寐、梅核气、惊恐等病证。',
    tebing: '先天失常，以生理缺陷、过敏反应等为主要特征。过敏体质者易患哮喘、荨麻疹、花粉症及药物过敏等。'
  }
  
  // 返回单个体质描述
  return descriptions[typeId] || ''
}

// 获取多个体质的描述
function getConstitutionsDescriptions(constitutions) {
  if (!constitutions || constitutions.length === 0) {
    return []
  }
  
  return constitutions.map(item => {
    return {
      id: item.id,
      name: item.name,
      description: getConstitutionDescription(item.id)
    }
  })
}

// 格式化测试日期
function formatTestDate(dateString) {
  const date = new Date(dateString)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 详细体质得分数据
function getScoreColor(score) {
  if (score >= 60) return '#FF4D4F'  // 高分红色
  if (score >= 40) return '#FF9C00'  // 中高分橙色
  if (score >= 30) return '#FAAD14'  // 中分黄色
  return '#52C41A'  // 低分绿色
}

// 各体质调理建议
const constitutionAdvice = {
  pinghe: '饮食有节制，不要常吃过冷过热或不干净的食物，粗细粮食要合理搭配。作息规律，保持心情舒畅，适度锻炼，避免过劳。',
  qixu: '多食用具有益气健脾作用的食物，如黄豆、白扁豆、鸡肉等。少食空心菜、生萝卜等。适合太极拳、八段锦、散步等缓和运动。',
  yangxu: '平时可多食牛肉、羊肉等温阳之品，少食梨、西瓜、荸荠等生冷寒凉食物，少饮绿茶。注意保暖，特别是背部和腰部，避免受凉。',
  yinxu: '多食瘦猪肉、鸭肉、绿豆、冬瓜等甘凉滋润之品，少食羊肉、韭菜、辣椒、葵花子等性温燥烈之品。保持充足睡眠，避免熬夜。',
  tanshi: '饮食应以清淡为主，可多食冬瓜等。因体形肥胖，易于困倦，故应根据自己的具体情况循序渐进，长期坚持运动锻炼。',
  shire: '饮食以清淡为主，可多食赤小豆、绿豆、芹菜、黄瓜、藕等甘寒的食物。适合中长跑、游泳、爬山、各种球类、武术等。',
  xueyu: '多食山楂、醋、玫瑰花等，少食肥肉等滋腻之品。可参加各种舞蹈、步行健身法、徒手健身操等。保持情绪舒畅，少生气。',
  qiyu: '多食黄花菜、海带、山楂、玫瑰花等具有行气、解郁、消食、醒神作用的食物。气郁体质的人不要总待在家里，要多参加群众性的体育运动项目。',
  tebing: '多食益气固表的食物，少食荞麦(含致敏物质荞麦荧光素)、蚕豆等。居室宜通风良好。保持室内清洁，被褥、床单要经常洗晒，可防止对尘螨过敏。'
}
</script>

<template>
  <view class="container">
    <view class="guide-list">
      <view class="header">
        <view class="title">健康指导</view>
        <view class="subtitle">中医体质辨识与养生指导</view>
      </view>
      
      <!-- 测试结果展示 -->
      <view v-if="lastTestResult" class="last-result">
        <view class="result-header">
          <view class="result-title">您的体质测试结果</view>
          <view class="result-date">{{ formatTestDate(lastTestResult.date) }}</view>
        </view>
        <view class="result-content">
          <view v-if="(!lastTestResult.mains || lastTestResult.mains.length === 0) && (!lastTestResult.tendencies || lastTestResult.tendencies.length === 0)" class="result-main">
            <view>
              <text>无体质倾向</text>
            </view>
          </view>
          <!-- 主体质显示区域 -->
          <view v-if="lastTestResult.mains && lastTestResult.mains.length > 0" class="result-main">
            <text class="result-label">主要体质：</text>
            <!-- 主体质情况 -->
            <view class="multi-main">
              <view 
                v-for="item in lastTestResult.mains" 
                :key="item.id" 
                class="main-item"
              >
                <text class="main-name">{{ item.name }}</text>
                <text v-if="item.result == '倾向是'" class="result-badge medium">倾向</text>
              </view>
            </view>
          </view>
          
          <!-- 倾向体质显示区域 -->
          <view v-if="lastTestResult.tendencies && lastTestResult.tendencies.length > 0" class="result-tendency">
            <text class="result-label">倾向体质：</text>
            <!-- 倾向体质情况 -->
            <view class="multi-tendency">
              <view 
                v-for="item in lastTestResult.tendencies" 
                :key="item.id" 
                class="tendency-item"
              >
                <text class="tendency-name">{{ item.name }}</text>
                <text v-if="item.result == '倾向是'" class="result-badge medium">倾向</text>
              </view>
            </view>
          </view>
          
          <!-- 体质描述部分 -->
          <view v-if="(lastTestResult.mains && lastTestResult.mains.length > 0) || (lastTestResult.tendencies && lastTestResult.tendencies.length > 0)" class="constitution-descriptions">
            <view v-if="lastTestResult.mains && lastTestResult.mains.length > 0" class="desc-section">
              <view class="section-title">主要体质特征：</view>
              <!-- 主体质描述 -->
              <view class="result-desc multi-desc">
                <view 
                  v-for="item in getConstitutionsDescriptions(lastTestResult.mains)"
                  :key="item.id"
                  class="desc-item"
                >
                  <view class="desc-title">{{ item.name }}</view>
                  <view class="desc-content">{{ item.description }}</view>
                </view>
              </view>
            </view>
            
            <!-- 倾向体质描述部分 -->
            <view v-if="lastTestResult.tendencies && lastTestResult.tendencies.length > 0" class="desc-section tendency-section">
              <view class="section-title">倾向体质特征：</view>
              <!-- 倾向体质描述 -->
              <view class="result-desc multi-desc">
                <view 
                  v-for="item in getConstitutionsDescriptions(lastTestResult.tendencies)"
                  :key="item.id"
                  class="desc-item tendency"
                >
                  <view class="desc-title">{{ item.name }}</view>
                  <view class="desc-content">{{ item.description }}</view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 分数可视化 -->
          <view class="score-chart">
            <view class="chart-title">体质得分分布</view>
            <view class="score-bars">
              <view v-for="result in lastTestResult.results.sort((a, b) => b.score - a.score)" :key="result.id" class="score-bar-item">
                <view class="bar-name">{{ result.name }}</view>
                <view class="bar-container">
                  <view class="bar-fill" :style="{
                    width: `${result.score}%`, 
                    backgroundColor: getScoreColor(result.score)
                  }"></view>
                  <text class="bar-value">{{ result.score }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 调理建议 -->
          <view v-if="(lastTestResult.mains && lastTestResult.mains.length > 0) || (lastTestResult.tendencies && lastTestResult.tendencies.length > 0)" class="advice-box">
            <view class="advice-title">
              <text class="icon">💡</text>
              <text>调理建议</text>
            </view>
            
            <!-- 主体质调理建议 -->
            <view v-if="lastTestResult.mains && lastTestResult.mains.length > 0" class="advice-content main-multi">
              <view v-for="item in lastTestResult.mains" :key="item.id" class="advice-item">
                <view class="advice-name">{{ item.name }}：</view>
                <view class="advice-text">{{ constitutionAdvice[item.id] }}</view>
              </view>
            </view>
            
            <!-- 倾向体质调理建议(多个) -->
            <view v-if="lastTestResult.tendencies && lastTestResult.tendencies.length > 0" class="advice-content secondary">
              <view class="tendency-title">倾向体质调理：</view>
              <view v-for="item in lastTestResult.tendencies" :key="item.id" class="advice-item">
                <view class="advice-name">{{ item.name }}：</view>
                <view class="advice-text">{{ constitutionAdvice[item.id] }}</view>
              </view>
            </view>
          </view>
          
          <button class="retest-btn" @click="startConstitutionTest">重新测试</button>
        </view>
      </view>
      
      <!-- 测试入口 -->
      <view v-else class="test-intro">
        <view class="test-image">
          <image src="/static/logo.svg" mode="aspectFit" />
        </view>
        <view class="test-content">
          <view class="test-title">中医体质辨识</view>
          <view class="test-desc">根据《中医体质分类与判定自测表》标准，通过回答问题了解您的体质类型，获取个性化养生方案</view>
          <button class="start-btn" @click="startConstitutionTest">开始测试</button>
        </view>
      </view>
      
      <view class="constitution-info">
        <view class="info-title">九种体质类型</view>
        <view class="info-desc">
          中医将人的体质分为平和质、气虚质、阳虚质、阴虚质、痰湿质、湿热质、血瘀质、气郁质、特禀质九种类型。不同体质的人应采取不同的调理方法，平和质宜保持，偏颇体质宜调整。
        </view>
        
        <view class="info-item">
          <view class="item-title">平和质(A型)</view>
          <view class="item-desc">阴阳气血调和，脏腑功能正常，体形匀称健壮，面色红润，精力充沛。平素患病较少，对外界环境适应能力强。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">气虚质(B型)</view>
          <view class="item-desc">元气不足，常表现为疲乏无力，气短懒言，容易出汗。易患感冒，内脏下垂等疾病，病后康复较慢。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">阳虚质(C型)</view>
          <view class="item-desc">阳气不足，常表现为怕冷，手脚发凉，面色苍白，喜热饮食。耐夏不耐冬，易感风、寒、湿邪。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">阴虚质(D型)</view>
          <view class="item-desc">阴液亏少，常表现为手足心热，口干咽燥，皮肤干燥，容易烦躁。耐冬不耐夏，不耐受暑、热、燥邪。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">痰湿质(E型)</view>
          <view class="item-desc">体内水湿停滞，常表现为体形肥胖，腹部松软，容易疲倦，舌苔厚腻。对梅雨季节及湿重环境适应能力差。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">湿热质(F型)</view>
          <view class="item-desc">湿热内蕴，常表现为面垢油光，易生痤疮，口苦口臭，小便黄赤。对夏末秋初湿热气候适应能力较差。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">血瘀质(G型)</view>
          <view class="item-desc">血行不畅，常表现为肤色晦暗，唇色偏暗，容易有瘀斑，记忆力减退。不耐受寒邪，易患血瘀相关疾病。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">气郁质(H型)</view>
          <view class="item-desc">气机郁滞，常表现为情绪波动大，容易焦虑抑郁，胸胁胀闷，喜欢叹气。对精神刺激适应能力较差。</view>
        </view>
        
        <view class="info-item">
          <view class="item-title">特禀质(I型)</view>
          <view class="item-desc">先天因素影响，常表现为对某些物质过敏，容易发生皮肤瘙痒，哮喘等症状。适应能力差，易引发宿疾。</view>
        </view>
      </view>
      
      <view class="constitution-advice">
        <view class="advice-title">体质养生基本原则</view>
        <view class="advice-content">
          <view class="advice-item">
            <view class="advice-name">平和质</view>
            <view class="advice-desc">饮食有节制，不要常吃过冷过热或不干净的食物，粗细粮食要合理搭配。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">气虚质</view>
            <view class="advice-desc">多食用具有益气健脾作用的食物，如黄豆、白扁豆、鸡肉等。少食空心菜、生萝卜等。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">阳虚质</view>
            <view class="advice-desc">平时可多食牛肉、羊肉等温阳之品，少食梨、西瓜、荸荠等生冷寒凉食物，少饮绿茶。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">阴虚质</view>
            <view class="advice-desc">多食瘦猪肉、鸭肉、绿豆、冬瓜等甘凉滋润之品，少食羊肉、韭菜、辣椒、葵花子等性温燥烈之品。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">痰湿质</view>
            <view class="advice-desc">饮食应以清淡为主，可多食冬瓜等。因体形肥胖，易于困倦，故应根据自己的具体情况循序渐进，长期坚持运动锻炼。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">湿热质</view>
            <view class="advice-desc">饮食以清淡为主，可多食赤小豆、绿豆、芹菜、黄瓜、藕等甘寒的食物。适合中长跑、游泳、爬山、各种球类、武术等。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">血瘀质</view>
            <view class="advice-desc">多食山楂、醋、玫瑰花等，少食肥肉等滋腻之品。可参加各种舞蹈、步行健身法、徒手健身操等。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">气郁质</view>
            <view class="advice-desc">多食黄花菜、海带、山楂、玫瑰花等具有行气、解郁、消食、醒神作用的食物。多参加群众性的体育运动项目。</view>
          </view>
          
          <view class="advice-item">
            <view class="advice-name">特禀质</view>
            <view class="advice-desc">多食益气固表的食物，少食荞麦、蚕豆等。居室宜通风良好。保持室内清洁，被褥、床单要经常洗晒，可防止对尘螨过敏。</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.last-result {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .result-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .result-date {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .result-content {
    .result-main, .result-tendency {
      margin-bottom: 15rpx;
      
      .result-label {
        font-size: 28rpx;
        color: #666;
        margin-right: 10rpx;
        display: block;
        margin-bottom: 10rpx;
      }
      
      .single-main, .single-tendency {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
        .result-value {
          font-size: 32rpx;
          font-weight: bold;
          color: #1890ff;
          margin-right: 15rpx;
        }
      }
      
      .multi-main, .multi-tendency {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-bottom: 10rpx;
        
        .main-item, .tendency-item {
          display: flex;
          align-items: center;
          background-color: #e6f7ff;
          border-radius: 30rpx;
          padding: 6rpx 20rpx;
          
          .main-name, .tendency-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #1890ff;
            margin-right: 10rpx;
          }
        }
        
        .tendency-item {
          background-color: #f0f7ff;
          
          .tendency-name {
            color: #1890ff;
          }
        }
      }
      
      .result-badge {
        font-size: 22rpx;
        padding: 2rpx 12rpx;
        border-radius: 20rpx;
        color: #fff;
        
        &.high {
          background-color: #ff4d4f;
        }
        
        &.medium {
          background-color: #ff9c00;
        }
        
        &.low {
          background-color: #faad14;
        }
      }
    }
    
    .result-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 30rpx;
      
      &.single-desc {
        padding: 20rpx;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        border-left: 6rpx solid #1890ff;
      }
      
      &.multi-desc {
        .desc-item {
          margin-bottom: 15rpx;
          padding: 15rpx;
          background-color: #f8f8f8;
          border-radius: 8rpx;
          border-left: 6rpx solid #1890ff;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .desc-title {
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 8rpx;
          }
          
          .desc-content {
            color: #666;
          }
        }
      }
    }
    
    .score-chart {
      margin-bottom: 30rpx;
      
      .chart-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .score-bars {
        .score-bar-item {
          margin-bottom: 16rpx;
          
          .bar-name {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
          }
          
          .bar-container {
            height: 30rpx;
            background-color: #f0f0f0;
            border-radius: 4rpx;
            position: relative;
            overflow: hidden;
            
            .bar-fill {
              height: 100%;
              transition: width 0.5s ease;
            }
            
            .bar-value {
              position: absolute;
              right: 10rpx;
              top: 0;
              height: 30rpx;
              line-height: 30rpx;
              font-size: 22rpx;
              color: #fff;
              z-index: 1;
            }
          }
        }
      }
    }
    
    .advice-box {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background-color: #e6f7ff;
      border-radius: 8rpx;
      
      .advice-title {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
        
        .icon {
          margin-right: 10rpx;
          font-size: 32rpx;
        }
      }
      
      .advice-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
        
        &.main-multi {
          .advice-item {
            margin-bottom: 15rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .advice-name {
              font-weight: bold;
              color: #1890ff;
              margin-bottom: 5rpx;
            }
          }
        }
        
        &.secondary {
          margin-top: 15rpx;
          padding-top: 15rpx;
          border-top: 1px dashed #ccc;
          
          .tendency-title {
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          
          .advice-item {
            margin-bottom: 15rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .advice-name {
              font-weight: bold;
              color: #1890ff;
              margin-bottom: 5rpx;
            }
          }
        }
      }
    }
    
    .retest-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #1890ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 40rpx;
    }
  }
}

.test-intro {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  
  .test-image {
    width: 160rpx;
    height: 160rpx;
    margin-right: 30rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .test-content {
    flex: 1;
    
    .test-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .test-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 30rpx;
    }
    
    .start-btn {
      background-color: #1890ff;
      color: #fff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      width: 100%;
    }
  }
}

.constitution-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .info-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    text-align: center;
  }
  
  .info-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 30rpx;
  }
  
  .info-item {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    
    .item-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .item-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.constitution-advice {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .advice-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    text-align: center;
  }
  
  .advice-content {
    .advice-item {
      margin-bottom: 20rpx;
      
      .advice-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #1890ff;
        margin-bottom: 10rpx;
        padding-left: 20rpx;
        position: relative;
        
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 10rpx;
          height: 10rpx;
          background-color: #1890ff;
          border-radius: 50%;
        }
      }
      
      .advice-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        padding-left: 20rpx;
      }
    }
  }
}

.constitution-descriptions {
  margin-bottom: 30rpx;
  
  .desc-section {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 15rpx;
    }
  }
  
  .tendency-section {
    margin-top: 20rpx;
  }
}

.result-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  
  &.single-desc {
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    border-left: 6rpx solid #1890ff;
    
    &.tendency {
      border-left-color: #52c41a;
      background-color: #f6ffed;
    }
  }
  
  &.multi-desc {
    .desc-item {
      margin-bottom: 15rpx;
      padding: 15rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      border-left: 6rpx solid #1890ff;
      
      &.tendency {
        border-left-color: #52c41a;
        background-color: #f6ffed;
        
        .desc-title {
          color: #52c41a;
        }
      }
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .desc-title {
        font-weight: bold;
        color: #1890ff;
        margin-bottom: 8rpx;
      }
      
      .desc-content {
        color: #666;
      }
    }
  }
}
</style>